Зависимости

• Shopify CLI: инструмент с интерфейсом командной строки, который помогает вам разрабатывать темы Shopify и управлять ими.
• TailwindCSS: многофункциональный CSS-фреймворк для быстрого создания индивидуальных проектов.

Настраивать

Мы используем Tailwind как отдельный инструмент CLI. Для получения дополнительной информации вы можете обратиться к официальному руководству.

Примечание: Если вы настраиваете это на Mac с процессором Intel, замените macos-arm64 на macos-x64 в приведенных ниже командах.

1. Загрузите последнюю версию двоичного файла TailwindCSS для macOS с архитектурой ARM64:

   curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64

2. Сделайте загруженный файл исполняемым:

   chmod x Tailwindcss-macos-arm64

3. Переместите исполняемый файл на более удобное имя:

   mv попутный ветерcss-macos-arm64 попутный ветерcss

4. Запустите наблюдатель TailwindCSS:

   • Эта команда будет отслеживать изменения в исходном файле TailwindCSS (./assets/tailwind.css) и компилировать выходные данные в нужный файл CSS (./assets/style.css):

     ./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --watch

Публиковать

Когда вы будете готовы скомпилировать CSS для производства, вам следует использовать следующую команду для минимизации CSS:

./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --minify

Эта команда возьмет входной файл CSS (./assets/tailwind.css), обработает его с помощью TailwindCSS и выведет минимизированный файл CSS (./assets/style.css), оптимизированный для производства.

Заключение

Следуя этим шагам, вы успешно настроили TailwindCSS как отдельный инструмент CLI и интегрировали его в свой проект. Эта настройка позволяет вам эффективно разрабатывать CSS и управлять им, используя подход Tailwind, ориентированный на утилиты. Запуск наблюдателя гарантирует, что ваш CSS автоматически компилируется во время разработки, а этап минимизации подготавливает ваш CSS к производству, оптимизируя его производительность. Этот оптимизированный процесс помогает поддерживать чистую и поддерживаемую кодовую базу, позволяя вам с легкостью сосредоточиться на создании и настройке темы Shopify.